<!doctype html>
<html>
    <head>
        <title>HT for Web 位置手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 位置手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_position">相对位置</a></li><li><a href="#ref_offsetrotation">偏移和旋转</a></li><li><a href="#ref_icons">图标参数</a></li><li><a href="#ref_3d">三维参数</a></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT</code>的<code>GraphView</code>二维拓扑和<code>Graph3dView</code>三维组件呈现图元信息时，一般可分为中心部位及<code>label</code>、<code>note</code>和<code>icons</code>等辅助部位，
这些附属部位的摆放位置就是本手册要介绍的内容，所有辅助部分都有共性的参数，同时针对不同图元也有特殊的参数，
<code>Graph3dView</code>针对三维空间也有其特殊的参数定义，本手册将逐一进行详细说明。</p>

<div id="ref_position"></div>

<h2>相对位置</h2>

<p>相对位置<code>position</code>是<code>HT</code>位置体系中最重要的参数，<code>label.position</code>，<code>note.position</code>以及<code>icons</code>上的<code>position</code>参数，
都是以<code>1</code>~<code>55</code>的数字的信息来描述相对于一个矩形区域的位置，对于<code>ht.Edge</code>和<code>ht.Polyline</code>的连线类型，可理解为高度为<code>0</code>的矩形。</p>

<pre><code>    34                            35
   1 | 2     38     3     39     4 | 5
 ----6-------40-----7-----41-------8----
   9 | 10    42     11    43    12 | 13
     |                             |
     |              44             |
  14 15 16   45  46 17 47  48   18 19 20
     |              49             |
     |                             |
  21 | 22    50     23     51   24 | 25 
 ----26------52-----27-----53------28---
  29 | 30    54     31     55   32 | 33  
    36                            37</code></pre>

<p><iframe src="examples/example_position.html" style="height:290px"></iframe></p>

<div id="ref_offsetrotation"></div>

<h2>偏移和旋转</h2>

<p><code>position</code>相对位置一般会结合<code>offset.x</code>和<code>offset.y</code>参数，在<code>position</code>的基础上进行水平和垂直位置偏移，
如文字的<code>label.offset.x</code>和<code>label.offset.y</code>参数。对于<code>label</code>和<code>icons</code>类型还支持<code>rotation</code>旋转参数，
如文字的<code>label.rotation</code>.</p>

<p><iframe src="examples/example_label.html" style="height:350px"></iframe></p>

<p><iframe src="examples/example_note.html" style="height:350px"></iframe></p>

<div id="ref_icons"></div>

<h2>图标参数</h2>

<p><code>icons</code>图标用于在图元上排放一个或一排的图标数组，其具有以下特殊的控制参数：</p>

<ul><li><code>gap</code>：指定图标之间的间距</li><li><code>direction</code>：指定<code>icons</code>的排列方向，默认值为<code>east</code>，可设置为<code>west</code>、<code>east</code>、<code>north</code>或<code>south</code></li><li><code>rotationFixed</code>：设置该参数为<code>true</code>将使得图标旋转不考虑连线角度，只由<code>rotation</code>决定</li><li><code>keepOrien</code>：当图标摆放在<code>Edge</code>和<code>Polyline</code>连线类型图元上时，图标默认自动调整方向以保持最好的阅读效果(比如文字)</li></ul>

<p>例如箭头类型图标一般需要将<code>keepOrien</code>设置为<code>true</code>，保持与连线固定的角度：</p>

<pre><code>&#39;icons&#39;: {
    fromArrow: {
        position: 15,
        names: [&#39;arrow&#39;],
        rotation: Math.PI,
        keepOrien: true,
        width: 50,
        height: 25
    },
    toArrow: {
        position: 19,
        names: [&#39;arrow&#39;],
        keepOrien: true,
        width: 50,
        height: 25
    },
}</code></pre>

<p><iframe src="examples/example_icons.html" style="height:350px"></iframe></p>

<div id="ref_3d"></div>

<h2>三维参数</h2>

<p><code>Graph3dView</code>三维组件中位置信息增加了<code>face</code>、<code>t3</code>、<code>r3</code>、<code>rotationMode</code>和<code>autorotate</code>等控制参数，
以<code>label</code>文字为例说明如下：</p>

<ul><li><code>label.face</code>：默认值为<code>front</code>，文字在<code>3D</code>下的朝向，可取值<code>left|right|top|bottom|front|back|center</code></li><li><code>label.t3</code>：文字在<code>3D</code>下的偏移，格式为<code>[x,y,z]</code></li><li><code>label.r3</code>：文字在<code>3D</code>下的旋转，格式为<code>[rotationX,rotationY,rotationZ]</code></li><li><code>label.rotationMode</code>：默认值为<code>xzy</code>，文字在<code>3D</code>下的沿三个轴旋转先后顺序，可取值<code>xyz|xzy|yxz|yzx|zxy|zyx</code></li><li><code>label.autorotate</code>：默认值为<code>false</code>，文字在<code>3D</code>下是否自动朝向眼睛的方向，可设为<code>true</code>或<code>y</code>，<code>y</code>代表沿着<code>y</code>轴转动</li></ul>

<p>注意：<code>3D</code>下不考虑以下的<code>2D</code>相关参数</p>

<ul><li><code>label.offset.x</code>：被<code>label.t3</code>替代</li><li><code>label.offset.y</code>：被<code>label.t3</code>替代</li><li><code>label.rotation</code>：被<code>label.r3</code>替代</li></ul>

<p><iframe src="examples/example_label3d.html" style="height:400px"></iframe></p>

<p><iframe src="examples/example_note3d.html" style="height:400px"></iframe></p>

<p><iframe src="examples/example_icons3d.html" style="height:400px"></iframe></p>

<p><iframe src="examples/example_arrow3d.html" style="height:400px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
